<template>
  <view class="container">
    <!-- 相机组件 -->
    <camera 
      v-if="showCamera"
      class="camera" 
      device-position="back" 
      flash="off" 
      @initdone="onCameraReady">
    </camera>
    
    <!-- 蒙层和取景框 -->
    <view class="overlay">
      <view class="frame-container">
        <view class="guide-frame"></view>
        <view class="frame-text">请将拍摄对象放入框内</view>
      </view>
    </view>
    
    <!-- 操作按钮 -->
    <view class="controls">
      <view class="capture-btn" @click="takePhoto">
        <view class="capture-inner"></view>
      </view>
      <view class="cancel-btn" @click="cancel">取消</view>
    </view>
    
    <!-- 预览区域 -->
    <view v-if="showPreview" class="preview-container">
      <image class="preview-image" :src="tempImagePath" mode="aspectFill"></image>
      <view class="preview-actions">
        <view class="retake-btn" @click="retake">重拍</view>
        <view class="confirm-btn" @click="confirm">确认</view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      showCamera: true,
      showPreview: false,
      tempImagePath: '',
      cameraContext: null
    }
  },
  methods: {
    // 相机初始化完成
    onCameraReady(e) {
      console.log('相机初始化完成', e);
      this.cameraContext = uni.createCameraContext();
    },
    
    // 拍照
    takePhoto() {
      if (!this.cameraContext) return;
      
      this.cameraContext.takePhoto({
        quality: 'high',
        success: (res) => {
          this.tempImagePath = res.tempImagePath;
          this.showCamera = false;
          this.showPreview = true;
        },
        fail: (err) => {
          console.error('拍照失败', err);
          uni.showToast({
            title: '拍照失败，请重试',
            icon: 'none'
          });
        }
      });
    },
    
    // 重拍
    retake() {
      this.showCamera = true;
      this.showPreview = false;
    },
    
    // 确认照片
    confirm() {
      // 返回图片路径给上一页
      const pages = getCurrentPages();
      const prevPage = pages[pages.length - 2];
      if (prevPage) {
        prevPage.$vm.selectedImage = this.tempImagePath;
      }
      uni.navigateBack();
    },
    
    // 取消
    cancel() {
      uni.navigateBack();
    }
  },
  onUnload() {
    // 页面卸载时释放相机资源
    this.cameraContext = null;
  }
}
</script>

<style lang="scss">
.container {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #000;
}

.camera {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.6);
  display: flex;
  justify-content: center;
  align-items: center;
}

.frame-container {
  position: relative;
  width: 80%;
  aspect-ratio: 1/1;
}

.guide-frame {
  width: 100%;
  height: 100%;
  border: 2px solid #4cd964;
  box-shadow: 0 0 30px rgba(76, 217, 100, 0.5);
  
  // 四角标记
  &::before,
  &::after {
    content: '';
    position: absolute;
    width: 30px;
    height: 6px;
    background-color: #4cd964;
  }
  
  &::before {
    top: -4px;
    left: -4px;
  }
  
  &::after {
    top: -4px;
    right: -4px;
  }
  
  .guide-frame-inner {
    position: absolute;
    width: 100%;
    height: 100%;
    
    &::before,
    &::after {
      content: '';
      position: absolute;
      width: 6px;
      height: 30px;
      background-color: #4cd964;
    }
    
    &::before {
      top: -4px;
      left: -4px;
    }
    
    &::after {
      bottom: -4px;
      left: -4px;
    }
  }
}

.frame-text {
  position: absolute;
  bottom: -40px;
  left: 0;
  width: 100%;
  text-align: center;
  color: #fff;
  font-size: 14px;
}

.controls {
  position: absolute;
  bottom: 50px;
  left: 0;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 40px;
}

.capture-btn {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background-color: rgba(255, 255, 255, 0.2);
  display: flex;
  justify-content: center;
  align-items: center;
  
  .capture-inner {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background-color: #fff;
  }
}

.cancel-btn {
  color: #fff;
  font-size: 16px;
}

.preview-container {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #000;
}

.preview-image {
  width: 100%;
  height: calc(100% - 80px);
  object-fit: cover;
}

.preview-actions {
  height: 80px;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 40px;
}

.retake-btn,
.confirm-btn {
  padding: 10px 30px;
  border-radius: 20px;
  font-size: 16px;
}

.retake-btn {
  background-color: #333;
  color: #fff;
}

.confirm-btn {
  background-color: #4cd964;
  color: #fff;
}
</style>    